<template>
  <div class="page">
    <div class="app-head">
      <el-form>
        <el-row
          type="flex"
          justify="start"
        >
          <el-col :span="10">
            <el-form-item
              label="产品组ID"
              label-width="80px"
            >
              <el-input
                v-model="productId"
                style="width:90%"
                size="mini"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item
              label="产品组名称"
              label-width="90px"
            >
              <el-input
                v-model="name"
                style="width:90%"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="产品上线状态"
              label-width="130px"
            >
              <el-select
                v-model="productExistsStatus"
                style="width:90%"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  value=""
                  label="全部"
                />
                <el-option
                  value="1"
                  label="上线"
                />
                <el-option
                  value="0"
                  label="下线"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="2"
            class="flexd"
          >
            <span v-show="platformArr.length > 0">
              <el-button
                v-powerbtn="{power: 'business-product-search'}"
                size="mini"
                type="primary"
                round
                icon="el-icon-search"
                @click="loadList(1, 20)"
              >查询</el-button>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            v-show="tabss === 'first1'"
            :span="10"
          >
            <el-form-item
              label="审核状态"
              label-width="80px"
            >
              <el-select
                ref="vipHeight"
                v-model="reviewStatus"
                style="width:90%"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  value=""
                  label="全部"
                />
                <el-option
                  value="0"
                  label="待提审"
                />
                <el-option
                  value="1"
                  label="审核中"
                />
                <el-option
                  value="2"
                  label="已通过"
                />
                <el-option
                  value="3"
                  label="未通过"
                />
                <!-- <el-option
                  v-for="item of pay"
                  :key="item.billingChannelId"
                  :value="item.billingChannelId"
                  :label="item.billingChannelName"
                /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="产品组类型"
              label-width="90px"
            >
              <el-select
                v-model="type"
                style="width:90%"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  value=""
                  label="全部"
                />
                <el-option
                  v-for="item of typeArr"
                  :key="item.typeId"
                  :value="item.typeId"
                  :label="item.typeName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="当前配置上线状态"
              label-width="130px"
            >
              <el-select
                v-model="status"
                style="width:90%"
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  value=""
                  label="全部"
                />
                <el-option
                  value="0"
                  label="上线"
                />
                <el-option
                  value="1"
                  label="下线"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="2"
            :offset="tabss !== 'first1' ? 10 : 0"
            class="flexd"
          >
            <el-button
              size="mini"
              plain
              round
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="start"
        >
          <el-col :span="10">
            <el-form-item
              label="创建时间"
              label-width="80px"
            >
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                :style="tiemLen"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                @change="checkStartTime"
              />
              <span style="display: inline-block;width:16px;">至</span>
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions2"
                :style="tiemLen"
                :editable="false"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>
          <el-col
            v-show="platformArr.length > 1"
            :span="10"
          >
            <el-form-item
              label="所属平台:"
              label-width="80px"
            >
              <el-radio-group
                v-model="radio1"
                size="mini"
                style="margin-left: -10px;margin-right:-4px"
              >
                <el-radio-button label="0">精确</el-radio-button>
                <el-radio-button label="1">模糊</el-radio-button>
              </el-radio-group>
              <el-select
                v-model="platformId"
                style="width:60%"
                multiple
                size="mini"
                placeholder="请选择"
              >
                <el-option
                  v-for="item of platformArr"
                  :key="item.idVal"
                  :value="item.idVal"
                  :label="item.powerName"
                />
                <!-- <el-option
                  v-for="item of platformArr"
                  :key="item.typeId"
                  :value="item.typeId"
                  :label="item.typeName"
                /> -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-tabs v-model="tabss" type="border-card" @tab-click="handleClick">
      <!-- 组件复用，懒得写for循环了 -->
      <el-tab-pane label="全部" name="first1">
        <all-page
          :list-content="listContent"
          :list-count="listCount"
          :middle-pageid="middlePageid"
          :middle-pagecount="middlePagecount"
          :middle-val="middleVal"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @reloadList="reloadList"
        />
      </el-tab-pane>
      <el-tab-pane label="待提审" name="second1">
        <all-page
          v-if="listContent.length > 0 && tabss === 'second1'"
          :list-content="listContent"
          :list-count="listCount"
          :middle-pageid="middlePageid"
          :middle-val="middleVal"
          :middle-pagecount="middlePagecount"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @reloadList="reloadList"
        />
      </el-tab-pane>
      <el-tab-pane label="审核中" name="third1">
        <all-page
          v-if="listContent.length > 0 && tabss === 'third1'"
          :list-content="listContent"
          :list-count="listCount"
          :middle-pageid="middlePageid"
          :middle-val="middleVal"
          :middle-pagecount="middlePagecount"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @reloadList="reloadList"
        />
      </el-tab-pane>
      <el-tab-pane label="已通过" name="fourth1">
        <all-page
          v-if="listContent.length > 0 && tabss === 'fourth1'"
          :list-content="listContent"
          :list-count="listCount"
          :middle-pageid="middlePageid"
          :middle-val="middleVal"
          :middle-pagecount="middlePagecount"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @reloadList="reloadList"
        />
      </el-tab-pane>
      <el-tab-pane label="未通过" name="fifth1">
        <all-page
          v-if="listContent.length > 0 && tabss === 'fifth1'"
          :list-content="listContent"
          :list-count="listCount"
          :middle-pageid="middlePageid"
          :middle-val="middleVal"
          :middle-pagecount="middlePagecount"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @reloadList="reloadList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getList, getSelectS } from '@/api/productGroup.js'
import { mapGetters } from 'vuex'
import powerbtn from '@/directive/powerbtn/index.js'
import allPage from './components/allPage'
export default {
  components: {
    allPage: allPage
  },
  provide() {
    return {
      platForm: this.plat
    }
  },
  directives: {
    powerbtn
  },
  data() {
    return {
      tabss: 'first1',
      middleVal: 'first1',
      middlePageid: 1,
      middlePagecount: 20,
      radio1: 0,
      listContent: [],
      listCount: 0,
      productId: '', // 产品组id
      name: '', // 产品组名称
      productExistsStatus: '', // 产品上线状态
      platformArr: [],
      platformId: [],
      type: '',
      status: '',
      typeArr: [],
      reviewStatus: '', // 审核状态
      tiemLen: '', // 输入框动态长度
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      startDate: '',
      endDate: ''
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  watch: {
    middleVal(val) {
      if (val === 'second1') {
        this.reviewStatus = '0'
      } else if (val === 'third1') {
        this.reviewStatus = '1'
      } else if (val === 'fourth1') {
        this.reviewStatus = '2'
      } else if (val === 'fifth1') {
        this.reviewStatus = '3'
      } else {
        this.reviewStatus = ''
      }
      this.loadList(1, 20)
    }
  },
  mounted() {
    this.$nextTick(() => {
      var len = this.$refs.vipHeight.$el.offsetWidth / 2 - 10
      console.log(len)
      this.tiemLen = {
        'width': len + 'px'
      }
    })
    this.platformArr = this.plat
    if (this.platformArr.length > 1) {
      this.platformArr.forEach(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
      })
      this.loadSelect()
      this.loadList(1, 20, true)
    }
    if (this.platformArr.length === 1) {
      var sina = this.platformArr[0].powerCode.lastIndexOf('-')
      this.platformId = this.platformArr[0].powerCode.substr(sina + 1)
      console.log(this.platformId)
      this.loadSelect()
      this.loadList(1, 20, true)
    }
  },
  methods: {
    handleClick() {
      this.middleVal = this.tabss
    },
    // 页面条数改变
    handleSizeChange(num) {
      console.log(num)
      this.loadList(1, num)
    },
    // 跳页
    handleCurrentChange(page) {
      this.loadList(page, 20)
    },
    reloadList() {
      this.loadList(1, 20)
    },
    // 此处分页每页最大数量存在查询逻辑分歧
    // 加载列表
    loadList(page, num, val) {
      this.pageid = 1
      if (val === true) {
        var len = this.platformArr.length
        if (len > 1) {
          this.radio1 = '1'
        } else {
          this.radio1 = '0'
        }
      }
      const request = {
        productGroupId: this.productId,
        name: this.name,
        platformId: Array.isArray(this.platformId) ? this.platformId.join(',') : this.platformId,
        status: this.status,
        productExistsStatus: this.productExistsStatus,
        reviewStatus: this.reviewStatus, // 审核状态
        productType: this.type,
        beginTime: this.startDate,
        endTime: this.endDate,
        inquiryMode: this.radio1,
        pageid: page, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log(request)
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          // var list = res.data.list
          res.data.list = res.data.list.map((item, index) => {
            if (index === 1 && Object.keys(item.preferentialTariffBean).length > 0) {
              delete item.preferentialTariffBean
            }
            return item
          })
          // 解决非必填项bug 2020-5-15
          if (res.data.list.length > 0) {
            res.data.list = res.data.list.map(item => {
              if (!item.preferentialTariffBean || Object.keys(item.preferentialTariffBean).length === 0) {
                item.preferentialTariffBean = {
                  createPerson: '',
                  createTime: '',
                  deleteFlag: '',
                  id: '',
                  preferentialTariffId: '',
                  preferentialTariffKey: '',
                  preferentialTariffName: '',
                  productId: '',
                  productKey: '',
                  productNo: '',
                  sequence: '',
                  tariffId: '',
                  tariffName: '',
                  type: ''
                }
              }
              return item
            })
          }
          this.listContent = res.data.list
          this.listCount = parseInt(res.data.count) // 总数量
          this.statuss = true
          this.middlePageid = page
          this.middlePagecount = num
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },
    loadSelect() {
      // 所属平台
      /* getSelectS({ functionType: 'platform' }).then(res => {
        this.platformArr = res.data.list
      }) */
      // 产品类型
      getSelectS({ functionType: 'productType' }).then(res => {
        this.typeArr = res.data.list
      })
    },
    // 重置
    reset() {
      if (this.platformArr.length > 1) {
        this.radio1 = '1'
        this.platformId = []
      }
      this.productId = ''
      this.type = ''
      this.name = ''
      this.status = ''
      this.productExistsStatus = ''
      this.reviewStatus = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(reg, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(reg, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(reg, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(reg, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
